<template>
  <!-- 通用审批详情弹框 -->
  <a-modal class="approval-dialog" :footer="null" :title="title" :closable="true" :visible="visible" width="1200px" @cancel="handleClose">
    <a-tabs v-model="key" type="card" class="mb20">
      <a-tab-pane key="1" tab="分包商进场当前流程">
        <img style="width: 100%" :src="flowChart" />
        <s-table ref="ApprovetableCurrent" bordered size="default" row-key="key" :columns="columnApproveCurrent" :data="loadDataCurrent" :alert="true" show-size-changer show-quick-jumper :show-pagination="false">
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="opinions" slot-scope="text">
            <ellipsis :length="30" tooltip>
              {{ text }}
            </ellipsis>
          </template>
          <template slot="userName" slot-scope="text">
            <ellipsis :length="50" tooltip placement="right">
              {{ text }}
            </ellipsis>
          </template>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="2" tab="分包商进场历史流程">
        <s-table ref="Approvetable1" bordered size="default" row-key="key" :columns="columnApprove" :data="loadData" :alert="true" show-size-changer show-quick-jumper :show-pagination="true" @expand="expand">
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="formData.opinions" slot-scope="text">
            <ellipsis :length="30" tooltip>
              {{ text }}
            </ellipsis>
          </template>
          <a-spin slot="expandedRowRender" slot-scope="record" :spinning="record.spinning" style="margin: 0">
            <a-table bordered row-key="id" :columns="columnApproveDetail" :data-source="record.description" :pagination="false" />
          </a-spin>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="3" tab="分包商出场当前流程">
        <img style="width: 100%" :src="flowChart1" />
        <s-table ref="ApprovetableCurrent1" bordered size="default" row-key="key" :columns="columnApproveCurrent" :data="loadDataCurrent1" :alert="true" show-size-changer show-quick-jumper :show-pagination="false">
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="opinions" slot-scope="text">
            <ellipsis :length="30" tooltip>
              {{ text }}
            </ellipsis>
          </template>
          <template slot="userName" slot-scope="text">
            <ellipsis :length="50" tooltip placement="right">
              {{ text }}
            </ellipsis>
          </template>
        </s-table>
      </a-tab-pane>
      <a-tab-pane key="4" tab="分包商出场历史流程">
        <s-table ref="Approvetable" bordered size="default" row-key="key" :columns="columnApprove" :data="loadData1" :alert="true" show-size-changer show-quick-jumper :show-pagination="true" @expand="expand">
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template slot="formData.opinions" slot-scope="text">
            <ellipsis :length="30" tooltip>
              {{ text }}
            </ellipsis>
          </template>
          <a-spin slot="expandedRowRender" slot-scope="record" :spinning="record.spinning" style="margin: 0">
            <a-table bordered row-key="id" :columns="columnApproveDetail" :data-source="record.description" :pagination="false" />
          </a-spin>
        </s-table>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>

<script>
import { getProcessNodeList, getProcInstByBusiness, completeTask, getCurrentProcess, getFlowChart } from '@/api/process'
import { getOrgEmployeesListBy, getProcessGroupPerson } from '@/api/commons'
import { STable } from '@/components'
import { Ellipsis } from '@/components'
import JosnBig from 'json-bigint'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'

const columnApproveCurrent = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: 65,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '节点名称',
    dataIndex: 'taskName'
  },
  {
    title: '处理人',
    dataIndex: 'userName',
    scopedSlots: { customRender: 'userName' }
  },
  {
    title: '处理结果',
    dataIndex: 'processStatusName',
    width: 120
  },
  {
    title: '审批意见',
    dataIndex: 'opinions',
    scopedSlots: { customRender: 'opinions' },
    width: 300
  },
  {
    title: '开始时间',
    dataIndex: 'createTime',
    width: 120
  },
  {
    title: '滞留时间',
    dataIndex: 'durationInMillis',
    width: 120
  },
  {
    title: '结束时间',
    dataIndex: 'endTime',
    width: 120
  }
]
const columnApprove = [
  {
    title: '序号',
    dataIndex: 'serial',
    width: 80,
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '节点名称',
    dataIndex: 'name'
  },

  {
    title: '发起人',
    dataIndex: 'userName'
  },
  {
    title: '发起时间',
    dataIndex: 'startTime'
  },
  {
    title: '滞留时间',
    dataIndex: 'durationTime'
  },
  {
    title: '结束时间',
    dataIndex: 'endTime'
  }
]
const columnApproveDetail = [
  {
    title: '审批人',
    dataIndex: 'userName'
  },
  {
    title: '处理结果',
    dataIndex: 'processStatusName',
    width: 120
  },
  {
    title: '审批时间',
    dataIndex: 'createTime'
  },
  {
    title: '节点名称',
    dataIndex: 'taskName'
  },
  {
    title: '滞留时间',
    dataIndex: 'durationInMillis'
  },
  {
    title: '审批意见',
    dataIndex: 'formData.opinions',
    scopedSlots: { customRender: 'formData.opinions' },
    width: 300
  }
]
export default {
  components: {
    STable,
    Ellipsis
  },
  props: {
    title: {
      type: String,
      default: '审批详情'
    },
    visible: {
      type: Boolean,
      default: false
    },
    businessId: {
      type: String,
      default: ''
    }
  },
  data() {
    this.columnApprove = columnApprove
    this.columnApproveCurrent = columnApproveCurrent
    this.columnApproveDetail = columnApproveDetail
    return {
      approveInfos: [],
      spinning: false,
      key: '1',
      flowChart: '',
      flowChart1: '',
      loadDataCurrent: () => {
        return getCurrentProcessList.call(this, { businessId: this.businessId })
      },
      loadData: parameter => {
        parameter.businessId = this.businessId
        return getProcInstByBusiness(parameter).then(res => {
          const data = res.data
          const userIds = []
          data.forEach(item => {
            item.spinning = false
            userIds.push(item.startUser)
            item.endTime = item.endTime || '进行中'
            item.durationTime = item.durationTime || '进行中'
            item.description = []
          })
          if (userIds?.length) {
            return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
              this.flowRequesting = false
              res.data.forEach(r => {
                employees.data.some(e => {
                  if (e.userId === r.startUser) {
                    r.userName = e.name
                    return true
                  }
                })
              })
              return res
            })
          }
        })
      },
      loadDataCurrent1: () => {
        return getCurrentProcessList.call(this, { businessId: this.businessId + '_out' })
      },
      loadData1: parameter => {
        parameter.businessId = this.businessId + '_out'
        return getProcInstByBusiness(parameter).then(res => {
          const data = res.data
          const userIds = []
          data.forEach(item => {
            item.spinning = false
            userIds.push(item.startUser)
            item.endTime = item.endTime || '进行中'
            item.durationTime = item.durationTime || '进行中'
            item.description = []
          })
          if (userIds?.length) {
            return getOrgEmployeesListBy({ userIds, delete: true }).then(employees => {
              this.flowRequesting = false
              res.data.forEach(r => {
                employees.data.some(e => {
                  if (e.userId === r.startUser) {
                    r.userName = e.name
                    return true
                  }
                })
              })
              return res
            })
          }
        })
      }
    }
  },
  created() {},
  methods: {
    handleClose() {
      this.$emit('confirm')
    },
    getFlowChart() {
      this.spinning = true
      getFlowChart(this.businessId)
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.spinning = false
        })
      getFlowChart(this.businessId + '_out')
        .then(res => {
          this.spinning = false
          if (res.code === 200) {
            this.flowChart1 = 'data:image/png;base64,' + res.data
          }
        })
        .catch(() => {
          this.spinning = false
        })
    },
    expand(expanded, record) {
      if (expanded) {
        this.getProcessNodes(record.procInstId, record)
      }
    },
    getProcessNodes(e, record) {
      record.spinning = true
      getProcessNodeList({ procInstId: e, pageNo: 1, pageSize: 100 })
        .then(res => {
          if (res.code === 200) {
            const data = res.data
            const userIds = data.map(d => {
              if (d.formData) {
                d.formData = JosnBig.parse(d.formData)
              }
              return d.assignee
            })
            record.description = res.data.map(item => ({ ...item, userName: null }))

            if (!userIds || userIds.length === 0) return

            getOrgEmployeesListBy({ userIds, delete: true })
              .then(employees => {
                record.description.forEach(r => {
                  const o = employees.data.find(emp => emp.userId === r.assignee)
                  r.userName = o?.name
                })

                // this.$refs.Approvetable.localDataSource.forEach(i => {
                //   if (i.procInstId == e) {
                //     data.forEach(item => {
                //       item.auditResult = item.formData.reject === 'true' ? '审批不通过' : item.formData.reject === 'false' ? '审批通过' : ''
                //     })
                //     i.description = data
                //   }
                // })
              })
              .catch(e => console.log(e))
              .finally(() => (record.spinning = false))
          }
        })
        .catch(() => {
          record.spinning = false
        })
    }
  },
  watch: {
    visible(v) {
      if (v) {
        this.$nextTick(() => {
          this.key = '1'
          this.getFlowChart()
          // 进场 - 当前流程 - 表格
          this.$refs.ApprovetableCurrent && this.$refs.ApprovetableCurrent.refresh()
          // 进场 - 历史流程 - 表格
          this.$refs.Approvetable1 && this.$refs.Approvetable1.refresh()
          // 出场 - 当前流程 - 表格
          this.$refs.ApprovetableCurrent1 && this.$refs.ApprovetableCurrent1.refresh()
          // 出场 - 历史流程 - 表格
          this.$refs.Approvetable && this.$refs.Approvetable.refresh()
        })
      } else {
        this.flowChart = ''
        this.flowChart1 = ''
        if (this.$refs.Approvetable) {
          this.$refs.Approvetable.localDataSource = []
        }
        if (this.$refs.ApprovetableCurrent) {
          this.$refs.ApprovetableCurrent.localDataSource = []
        }
        if (this.$refs.Approvetable1) {
          this.$refs.Approvetable1.localDataSource = []
        }
        if (this.$refs.ApprovetableCurrent1) {
          this.$refs.ApprovetableCurrent1.localDataSource = []
        }
      }
    }
  }
}
</script>

<style>
.approval-dialog {
  position: relative;
  z-index: 9999999999;
}
</style>
